<template>
	<div class="order-info">
		<div class="order-title">
			<span class="store-name">{{ orderRow.store_name }}</span>
			<span class="order-on"> 订单ID：{{ orderRow.id }} </span>
			<span class="order-on"> 订单号：{{ orderRow.order_no }} </span>
			<span class="order-time"> 下单时间：{{ showDateTime(orderRow.create_at) }} </span>
		</div>
		<div class="order-subs">
				<div
					v-for="sub in orderRow.subs" :key="sub.id"
					class="order-sub-item"
					style="border-bottom: 1px solid #e7e5e5; padding: 3px 0"
				>
					<goods-info-item :row="sub" :baseUrl="baseUrl" type="order" />
					<div class="order-sub-refund">
						<el-button type="text" v-show="sub.status == 4">已发货</el-button>
						<el-button
							type="text"
							class="btn-link"
							v-show="sub.refund_status > 0"
							@click="openRefund(sub.id)"
							>售后</el-button
						>
					</div>
				</div>
		</div>
	</div>
</template>

<script>
import dayjs from "dayjs";

export default {
	name: "order-info-box",
	props: {
		orderRow: { type: Object, default: () => {} },
		baseUrl: { type: String, default: "" }
	},
	data() {
		return {};
	},
	methods: {
		openRefund(_subId) {
			console.log(_subId);
			console.log(this.baseUrl);
		},
		showDateTime(_time) {
			if (!_time) {
				return "-";
			}
			return dayjs.unix(_time).format("YYYY-MM-DD HH:mm:ss");
		}
	}
};
</script>

<style scoped lang="scss">
.order-info {
	padding-top: 5px;
	.order-title {
		color: #909399;

		.store-name {
			border: 1px solid #00a0e9;
			color: #00a0e9;
			font-weight: 700;
			padding: 3px 5px;
			margin-right: 5px;
		}

		.order-time {
			margin-left: 15px;
		}
	}
	.order-subs {
		.order-sub-item {
			position: relative;

			.order-sub-refund {
				position: absolute;
				right: 5px;
				bottom: 0;
			}
		}
	}
}
</style>
